<template>
	<view>
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="content echarts" 
		@click="echarts.onClick" 
		:prop="option"
		 :change:prop="echarts.updateEcharts"
			id="echarts"></view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		name: "au-chartBar",
		props: {
			chartBarData: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				//柱状条的颜色
				color: ['#1CBD7A', '#4EAAE6', '#D2D2D2', 'rgba(0,0,0,0)'],
				option: {
					//图表title
					// title: {
					// 	text: '横向柱状堆叠图'
					// },
					tooltip: {
						show: false,
						trigger: 'axis',
						axisPointer: { // Use axis to trigger tooltip
							type: 'line' // 'shadow' as default; can also be 'line' or 'shadow'
						},
					},
					//图例
					legend: {
						data: ['厂区', '港口', '订单', '总计'],
						x: 'center',
						y: 'bottom',
						left: 100,
					},
					//图表区域的位置
					grid: {
						top: '0%',
						left: '2%',
						right: '2%',
						bottom: '15%',
						containLabel: true //是否显示刻度说明
					},
					//滚动条样式
					dataZoom: [],
					calculable: true,
					//x轴数据
					xAxis: {
						type: 'value',
					},
					//y轴数据
					yAxis: [{
						type: 'category',
						axisLine: {
							show: false //y轴线消失
						},
						axisTick: {
							show: false //y轴坐标点消失,
						},
						data: []
					}],
					series: []
				}
			}
		},
		mounted() {
			this.initData();
			this.refreshData();
		},
		watch: {
			chartBarData: function(newQuestion, oldQuestion) {
				this.refreshData()
			}
		},
		methods: {
			initData() {
				for (let i = 0; i < this.option.legend.data.length; i++) {
					let perGroupData = {
						name: this.option.legend.data[i],
						type: 'bar',
						stack: 'bar',
						label: {
							padding: [3, 3, 3, 5],
							show: false,
							formatter: "总计 {c} 吨",
							position: "start",
							textStyle: {
								fontWeight: "bolder",
								fontSize: "8",
								color: "#333333"
							}
						},
						itemStyle: {
							color: '',
							barBorderRadius: 0
						},
						barWidth: 12,
						// barCategoryGap: '2%', //多个并排柱子设置柱子之间的间距
						emphasis: {
							focus: 'series'
						},
						data: []
					}
					if (i == 3) {
						perGroupData.label.show = true;
					}
					perGroupData.itemStyle.color = this.color[i];
					this.option.series.push(perGroupData);
				}
			},

			//数据填充
			refreshData() {
				if (this.chartBarData.materialNames) {
					this.option.yAxis[0].data = this.chartBarData.materialNames;
				}
				if (this.chartBarData.inventorys) {
					for (let i = 0; i < this.option.series.length; i++) {
						this.option.series[i].data = this.chartBarData.inventorys[i];
					}
				}
				
				if(this.option.yAxis[0].data.length > 6) {
					let zoomStyle = {
						type: 'slider',
						show: true,
						"filterMode": "empty",
						"disabled": false,
						yAxisIndex: 0,
						right: '2%', //组件离容器右侧的距离
						// top: '25%',
						// bottom: '15%',
						start: 0, //滚动条的起始位置
						end: 40, //滚动条的结束位置,表示40% 
						startValue: 0, //数据窗口范围的起始数值 
						endValue: 100, //数据窗口范围的结束数值。 
						showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
						//设置滚动条样式
						width: 10,
						backgroundColor: '#eeeeee', //未选中区域的填充颜色
						borderColor: "#eeeeee",
						//设置滚动条手柄样式
						fillerColor: '#cecece',
						//滑动条上选中范围2个滑动小块样式自定义
						handleSize: '80%', // 滑动条上选中范围2个滑动小块的大小
						handleColor: '#cecece', //滑动图标的颜色
						handleStyle: {
							borderColor: "#cecece",
							borderWidth: "0",
							shadowBlur: 2,
							background: "#cecece",
							shadowColor: "#cecece",
						},
						handleIcon: "path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z", //圆形
					}
					this.option.dataZoom.push(zoomStyle);
				} else {
					this.option.dataZoom = [];
				}
			},

			//点击图标上的某项数据
			chartItemClick(options) {
				this.$emit('chartItemClick', options);
			}

		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		data() {
			return {
				clickData: null // echarts点击事件的值
			}
		},
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/common/js/echarts.min.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				// 观测更新的数据在 view 层可以直接访问到
				this.option.legend.formatter = function(params) {
					if (params == '总计') {
						return ''
					} else {
						return params
					}
				}

				myChart.setOption(this.option)

				//图表上某项的点击事件
				myChart.on('click', params => {
					// 把点击事件的数据缓存下来
					this.clickData = params;
					this.$ownerInstance.callMethod('chartItemClick', {
						value: this.clickData.data,
						name: this.clickData.name,
						seriesName: this.clickData.seriesName,
					});
					//  // 上次点击数据置空
					this.clickData = null;
				})
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				if (myChart !== undefined) {
					myChart.setOption(newValue)
				}
			},

			//整个图表的点击事件
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				// ownerInstance.callMethod('chartItemClick', {
				// 	test: 'test'
				// })
			}
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.echarts {
		width: 100%;
		height: 400rpx;
	}
</style>
